<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS-01 图像属性设置</title>
        <style type="text/css">
            img{
                width: 100px;
                height: 100px;
                overflow:hidden;
                border-radius: 25px;
            }
            .blur{filter: blur(4px);}
            .light{filter:brightness(0.30);}
            .contrast{filter: contrast(200%);}
            .grayscale{filter: grayscale(100%);}
            .huerotate{filter: hue-rotate(190deg);}
            .invert{filter: invert(100%);}
            .opacity{filter: opacity(10%);}
            .saturate{filter: saturate(100);}
            .sepia{filter: sepia(70%);}
            .shadow{filter: drop-shadow(8px 8px 10px green);}
        </style>
    </head>
    <body>

        <img src="20210208.jpg">
        <img src="20210208.jpg" class="blur">
        <img src="20210208.jpg" class="light">
        <img src="20210208.jpg" class="contrast">
        <img src="20210208.jpg" class="grayscale">
        <img src="20210208.jpg" class="huerotate">
        <img src="20210208.jpg" class="invert">
        <img src="20210208.jpg" class="opacity">
        <img src="20210208.jpg" class="saturate">
        <img src="20210208.jpg" class="sepia">
        <img src="20210208.jpg" class="shadow">
    </body>
</html>